<template>
	<view class="wrapper">
		<u-sticky :h5-nav-height="0" :enable="stickyEnable">
			<view class="fixed-block">
				<view class="search-block">
					<u-search placeholder="请输入电站名称" v-model="keyword" @clear="doSearch" @search="doSearch"
						@custom="doSearch" />
				</view>

				<u-gap height="10" />

				<view class="tab-block">
					<u-tabs :list="tabs" :is-scroll="false" :current="current" @change="changeTab" :show-bar="false"
						active-color="#333" inactive-color="#999" font-size="28" />
					<u-line color="#f0f0f0" />
					<view class="sort-items">
						<view class="sort-item" v-for="(item,index) in sortItems" :key="index"
							@click="changeSort(index)">
							<view class="txt">{{item.name}}</view>
							<u-image :src="`/static/station/${item.sort}.png`" width="20" height="25"
								v-if="item.sort" />
							<view v-else>-</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="items-block" v-if="handledDataList.length > 0">
			<view v-for="(item,index) in handledDataList" :key="index">
				<u-gap height="20" bg-color="#F7F8FA" v-show="index > 0" />

				<view class="item-block">
					<view class="title-block">
						<view>{{item.name}}</view>
						<view class="title-block-right" @click="goDetail(item)">
							<u-image src="/static/station/alert.png" width="20" height="20" />
							<span class='txt'>
								{{parseInt(item.yx_alm_num) + parseInt(item.tx_alm_num) + parseInt(item.lj_alm_num)}}
							</span>
						</view>
					</view>
					<u-line />
					<navigator hover-class="none"
						:url="`/pages/station_detail/index?stationInfo=${JSON.stringify(item)}`">
						<view class="content-block">
							<view class="left-block">
								<u-image class="img" 
								:src="item.image1 ? `${imageBaseUrl}/${item.image1.substr(0,item.image1.lastIndexOf('.'))}_wx${item.image1.substr(item.image1.lastIndexOf('.'))}`:null"
									width="166" height="166" border-radius="6" />
								<view class="location">
									<u-icon name="map"></u-icon>
									<view class="city">{{item.city}}</view>
								</view>
							</view>
							<view class="right-item">
								<view class="right-item-header">
									<u-image src="/static/home/current_power.png" width="20" height="20"
										style="margin-top:-4upx;" />
									<view class="txt">当前功率:{{parseFloat(item.ssgl).toFixed(2)}}kW</view>
									<view class="txt">
										<span>满发小时:</span>
										<span
											v-if="item.zjrl === null || item.zjrl === '0' || item.zjrl === undefined">0</span>
										<span
											v-else>{{(parseFloat(item.drfdl)/parseFloat(item.zjrl)).toFixed(1)}}</span>
										<span>h</span>
									</view>
								</view>
								<view class="right-item-cell">
									<view class="label">装机容量: </view>
									<view class="value">{{parseFloat(item.zjrl || 0)}}KW</view>
								</view>
								<view class="right-item-cell">
									<view class="label">逆变/电表日电量: </view>
									<view class="value">
										<span>
											{{item.drfdl === null || item.drfdl === '' ? ' - ' : parseFloat(item.drfdl || 0).toFixed(2)}}
										</span>
										<span>/</span>
										<span>{{item.cjrdl === null || item.cjrdl === '' ? ' - ' :  parseFloat(item.cjrdl || 0).toFixed(2)}}</span>
										<span> kWh</span>
									</view>
								</view>
								<view class="right-item-cell">
									<view class="label">逆变/电表总电量: </view>
									<view class="value">
										<span>{{item.nbqzdl === null || item.nbqzdl === '' ? ' - ' : (parseFloat(item.nbqzdl || 0)/1000).toFixed(2)}}</span>
										<span>/</span>
										<span>{{item.cjzdl === null || item.cjzdl === '' ? ' - ' :(parseFloat(item.cjzdl || 0)/1000).toFixed(2)}}</span>
										<span> MWh</span>
									</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>

		<u-empty v-else margin-top="200" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stickyEnable: true,
				keyword: null,
				current: 0,
				sortItems: [{
					name: '当前功率',
					sort: null
				}, {
					name: '装机容量',
					sort: null
				}, {
					name: '今日电量',
					sort: null
				}, {
					name: '满发小时',
					sort: null
				}],
				dataList: [],
				handledDataList: [] //被处理过的数据
			}
		},
		onShow() {
			this.stickyEnable = true
		},
		onHide() {
			this.stickyEnable = false
		},
		computed: {
			tabs() {
				let recordItems = this.dataList
				//如果有过滤，数量取过滤的列表
				if (this.keyword !== null && this.keyword !== undefined && this.keyword !== '') {
					recordItems = this.handledDataList
				}
				let total_count = recordItems.length

				let normal_count = recordItems.filter(item => {
					return item.yx_alm_num === "0" && item.tx_alm_num === "0" && item.lj_alm_num === "0"
				}).length

				let exp_count = recordItems.filter(item => {
					return item.yx_alm_num !== "0" || item.tx_alm_num !== "0" || item.lj_alm_num !== "0"
				}).length
				return [{
					name: `全部(${total_count})`
				}, {
					name: `正常(${normal_count})`
				}, {
					name: `异常(${exp_count})`
				}]
			}
		},
		onLoad() {
			this.loadStationList()
		},
		onPullDownRefresh() {
			this.loadStationList()
		},
		methods: {
			changeTab(index) {
				if (this.current === index) return
				this.current = index
				this.handleData()
			},
			changeSort(index) {
				this.sortItems.forEach((item, idx) => {
					if (idx === index) { //当前选择的设置
						if (item.sort) {
							item.sort = item.sort === 'desc' ? 'asc' : 'desc'
						} else {
							item.sort = 'asc'
						}
					} else { //其他的清空
						item.sort = null
					}
				})
				this.handleData()
			},
			loadStationList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.api.getStationList().then(res => {
					if (res.error_code === 0) {
						this.dataList = res.data
						this.handledDataList = res.data
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
					uni.hideLoading()
				})
			},
			doSearch(e) {
				if (e === undefined || e === '' || e === null) {
					this.current = 0
					this.sortItems.forEach(item => {
						item.sort = null
					})
					this.loadStationList()
				} else {
					this.handleData()
				}
			},
			handleData() {
				uni.showLoading({
					title: '加载中...'
				})
				try {
					let item_list = []
					//过滤状态
					if (this.current === 0) {
						item_list = this.dataList
					} else if (this.current === 1) {
						item_list = this.dataList.filter(item =>
							item.yx_alm_num === "0" && item.tx_alm_num === "0" && item.lj_alm_num === "0"
						)
					} else if (this.current === 2) {
						item_list = this.dataList.filter(item =>
							item.yx_alm_num !== "0" || item.tx_alm_num !== "0" || item.lj_alm_num !== "0"
						)
					}
					//过滤名称
					if (this.keyword) {
						console.log(this.keyword)
						item_list = item_list.filter(item => item.name.indexOf(this.keyword) !== -1)
					}
					// 处理排序
					if (this.sortItems[0].sort) { // 当前功率
						item_list.sort((a, b) => {
							let a_ssgl = parseFloat(a.ssgl)
							let b_ssgl = parseFloat(b.ssgl)
							if (this.sortItems[0].sort === 'desc') return a_ssgl > b_ssgl ? 1 : -1
							return a_ssgl > b_ssgl ? -1 : 1
						})
					}
					if (this.sortItems[1].sort) { //装机容量
						item_list.sort((a, b) => {
							let a_zjrl = parseFloat(a.zjrl)
							let b_zjrl = parseFloat(b.zjrl)
							if (this.sortItems[1].sort === 'desc') return a_zjrl > b_zjrl ? 1 : -1
							return a_zjrl > b_zjrl ? -1 : 1
						})
					}
					if (this.sortItems[2].sort) { //当日发电量
						item_list.sort((a, b) => {
							let a_drfdl = parseFloat(a.drfdl)
							let b_drfdl = parseFloat(b.drfdl)
							if (this.sortItems[2].sort === 'desc') return a_drfdl > b_drfdl ? 1 : -1
							return a_drfdl > b_drfdl ? -1 : 1
						})
					}
					if (this.sortItems[3].sort) { // TODO:利用小时
						item_list.sort((a, b) => {
							let a_val = parseFloat(a.drfdl) / parseFloat(a.zjrl)
							let b_val = parseFloat(b.drfdl) / parseFloat(b.zjrl)
							if (this.sortItems[3].sort === 'desc') return a_val > b_val ? 1 : -1
							return a_val > b_val ? -1 : 1
						})
					}
					this.handledDataList = item_list
				} catch (e) {

				} finally {
					uni.hideLoading()
				}
			},
			goDetail(stationInfo) {
				let count = parseInt(stationInfo.yx_alm_num) + parseInt(stationInfo.tx_alm_num) + parseInt(stationInfo
					.lj_alm_num)
				if (count > 0) {
					uni.setStorageSync('warning_station', {
						id: stationInfo.id,
						name: stationInfo.name
					})
					uni.switchTab({
						url: `/pages/warning/index`,
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding-bottom: 40upx;

		.fixed-block {
			background: #FFF;
			padding-top: 40upx;
			padding-bottom: 20upx;

			.search-block {
				padding: 0 32upx;
			}

			.tab-block {
				padding: 0 32upx;

				.sort-items {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 12upx;

					.sort-item {
						border-radius: 4upx;
						background-color: #f0f0f0;
						color: 999;
						font-size: 24upx;
						padding: 4upx 14upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-right: 16upx;

						.txt {
							margin-right: 10upx;
						}
					}
				}
			}
		}

		.items-block {
			padding-bottom: 20upx;

			.item-block {
				padding-top: 30upx;

				.title-block {
					padding: 0 32upx;
					font-size: 30upx;
					font-weight: bold;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20upx;

					.title-block-right {
						display: flex;

						.txt {
							margin-left: 15upx;
							font-size: 30upx;
							color: #FF9244;
						}
					}
				}

				.content-block {
					padding: 20upx 32upx 30upx;
					display: flex;

					.left-block {
						position: relative;
						border-radius: 10upx;

						.location {
							padding: 2upx 10upx;
							position: absolute;
							display: flex;
							bottom: 0;
							background: rgba($color: #000000, $alpha: .35);
							color: #fff;
							width: 100%;

							.city {
								margin-left: 10upx;
								font-size: 22upx;
							}
						}
					}

					.right-item {
						margin-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.right-item-header {
							padding: 10upx 20upx;
							width: 500upx;
							background-color: rgba(84, 159, 250, 0.1);
							display: flex;
							justify-content: flex-start;
							border-radius: 8upx;

							.txt {
								margin-left: 6upx;
								font-size: 20upx;
								color: #4290F2;
							}
						}

						.right-item-cell {
							font-size: 24upx;
							display: flex;
							align-items: center;

							.label {
								color: #999;
							}

							.value {
								color: #333;
								margin-left: 6upx;
							}
						}
					}
				}
			}
		}
	}
</style>
